require(['./config'],() => {
    require(['template','header','footer','info','jquery'],(template,header) => {
        class Car{
            constructor(){
                this.prodList = [];
                this.allCount = 0;
                this.allPrice = 0;
                //定义全选状态
                this.checkAll = true;
                this.init();
            }
            init(){
                this.allCount = 0;
                this.allPrice = 0;
                //从localStorage里取数据
                let prodList = localStorage.getItem('prodList');
                if(prodList){
                    this.prodList = JSON.parse(prodList);
                    //渲染页面
                    var html = template('prodListTemplate',{list: this.prodList, checkAll: this.checkAll});
                    $('.carBox').html(html);
                    //计算总量和总价
                    this.prodList.forEach(item => {
                        if(item.isChecked){
                            this.allCount += item.count;
                            this.allPrice += (item.count * item.price);
                        }
                    })
                    $('.allCount span').text(this.allCount);
                    $('.total-price span span').text(this.allPrice.toFixed(2));
                    
                }
                header.computedCount();
                this.delProd();
                this.changeCount();
                this.check();
            }
            //删除  数据驱动  删除this.prodList 再重新存一下
            delProd(){
                const dels = document.querySelectorAll('.delete');
                // console.log(dels);
                for(let i = 0 ; i < dels.length ; i++){
                    dels[i].onclick = () => {
                        //只要删除this.prodList里面对应的那一条数据
                        this.prodList.splice(i,1);
                        //再次存一下localStorage
                        localStorage.setItem('prodList',JSON.stringify(this.prodList));
                        //从新渲染页面
                        this.init();
                    }
                }
            }

            //改变数量
            changeCount(){
                var carReduceBtns = document.querySelectorAll('.carReduceBtn'),
                    carAddBtns = document.querySelectorAll('.carAddBtn'),
                    that = this;  //先把this保存一下
                //绑定事件
                // console.log(carReduceBtns);
                for(var i = 0 ; i < carReduceBtns.length ; i++){
                    carReduceBtns[i].onclick = function(){
                        //获取id
                        // var id = $(this).parent().attr('prodId') - 0;
                        // // console.log(id);
                        // //this.prodList里面找到这条数据改变他的数量
                        // that.prodList.forEach(item => {
                        //     if(item.id === id){
                        //         if(item.count <= 1){
                        //             return;
                        //         }
                        //         item.count--;
                        //         //重新保存数据到localStorage
                        //         localStorage.setItem('prodList',JSON.stringify(that.prodList))
                        //         //重新渲染页面
                        //         that.init();
                                
                        //     }
                        // })
                        that.addReduce('reduce',that,this);
                    }
                    carAddBtns[i].onclick = function(){
                        //获取id
                        // var id = $(this).parent().attr('prodId') - 0;
                        // // console.log(id);
                        // //this.prodList里面找到这条数据改变他的数量
                        // that.prodList.forEach(item => {
                        //     if(item.id === id){
                        //         item.count++;
                        //         //重新保存数据到localStorage
                        //         localStorage.setItem('prodList',JSON.stringify(that.prodList))
                        //         //重新渲染页面
                        //         that.init();
                                
                        //     }
                        // })
                        that.addReduce('add',that,this);

                    }
                    //点击按钮的时候 找到商品的 id 用 prodList 进行对比
                }
            }
            
            addReduce(str,that,_this){
                //获取id
                var id = $(_this).parent().attr('prodId') - 0;
                // console.log(id);
                //this.prodList里面找到这条数据改变他的数量
                that.prodList.forEach(item => {
                    if(item.id === id){
                        if(str === 'reduce'){
                            if(item.count <= 1){
                                return;
                            }
                            item.count--;
                        }else{
                            item.count++;
                        }
                        //重新保存数据到localStorage
                        localStorage.setItem('prodList',JSON.stringify(that.prodList))
                        //重新渲染页面
                        that.init();
                        
                    }
                })
            }
            //全选
            check(){
                //1.点击全选按钮 把this.checkAll改变成相反的
                // var that = this;
                // $('.all')[0].onclick = function(){
                //     that.checkAll = !that.checkAll;
                //     that.prodList.forEach(item => {
                //         item.isChecked = that.checkAll;
                //     })
                //     that.init();
                // }
                //2.遍历循环prodList吧每一项的isChecked值改变和this.checkAll保持一致
                //3、重新渲染页面

                //通过处理数据改版页面样式
                //1.点击全选按钮 把this.checkAll的值改成相反
                //2.遍历循环prodList吧每一项的isChecked值改变和this.checkAll保持一致
                //3、重新渲染页面
                var that = this;
                $('.checkAll')[0].onclick = function(){
                    that.checkAll = !that.checkAll;
                    that.prodList.forEach(item => {
                        item.isChecked = that.checkAll;
                    })
                    //重新存一下localstorage
                    localStorage.setItem('prodList',JSON.stringify(that.prodList));
                    //重新渲染页面
                    that.init();
                }
                //给每一个单独的选择框绑定事件
                var inps = $('.options .checkbox');
                for(let i = 0; i < inps.length ; i++){
                    inps[i].onclick = function(){
                        //1、给当前这一项的ischecked取反 
                        //2、如果所有都选中就把全选勾上，如果有一个没有选中 全选就不要
                        that.prodList[i].isChecked = !that.prodList[i].isChecked;
                        const flag = that.prodList.every(item => {
                            return item.isChecked;
                        })
                        //只有每一项都为 true flag才为true
                        //把全局的 checkAll状态改为和flag保持一致
                        that.checkAll = flag;
                        localStorage.setItem('prodList',JSON.stringify(that.prodList));
                        that.init();
                    }
                }
            }
        }
        return new Car();
    })
})